<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/static/element-ui/element-ui@2.9.1.css">
    <!-- 先引入 Vue -->
    <script src="/static/element-ui/vue@2.6.10.js"></script>
    <!-- 引入组件库 -->
    <script src="/static/element-ui/element-ui@2.9.1.js"></script>
    <script src="/static/element-ui/axios@0.18.0.min.js"></script>
    <script src="/static/js/jquery@3.4.1.min.js"></script>
    <script src="/static/js/jquery.cookie@1.4.1.min.js"></script>
    <script src="/static/js/rules.js"></script>

    <style>
        .el-main a {
            text-decoration: none;
            color: #333;
        }

        body {
            width: 600px;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<el-container>
    <div id="app">
        <el-breadcrumb separator="/">
            <template v-for="item in navs">
                <el-breadcrumb-item><a :href="item.url">{{ item.name }}</a></el-breadcrumb-item>
            </template>
        </el-breadcrumb>

        <el-header>
            <h2>{{ title }}</h2>

        </el-header>

        <el-main>
            <!-- 添加任务表单开始 -->
            <template>
                <el-form ref="form" :model="formData" label-width="100px" :rules="rules">
                    <el-form-item label="服务器" prop="server_name">
                        <el-input v-model="formData.server_name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="项目" prop="project_name">
                        <el-input v-model="formData.project_name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="爬虫" prop="spider_name">
                        <el-input v-model="formData.spider_name" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="定时类型">
                        <el-select v-model="formData.trigger" @change="changeTrigger" placeholder="请选择定时类型">
                            <el-option v-for="item in triggers" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <div class="cron">
                        <el-form-item label="crontab">
                            <el-input v-model="formData.cron" placeholder="* * * * *"></el-input>
                        </el-form-item>
                    </div>

                    <div class="interval hide">
                        <el-form-item label="时间间隔">
                            <el-tooltip class="item" effect="dark" content="单位: 分钟" placement="right">
                                <el-input-number v-model="formData.interval" controls-position="right"
                                                 :min="1"></el-input-number>
                            </el-tooltip>
                        </el-form-item>
                    </div>

                    <div class="random hide">
                        <el-form-item label="随机时间间隔">
                            <el-tooltip class="item" effect="dark" content="单位: 分钟" placement="top">
                                <el-slider
                                        v-model="random_arr"
                                        range
                                        show-stops
                                        :min="1"
                                        :max="60">
                                </el-slider>
                            </el-tooltip>
                        </el-form-item>
                    </div>

                    <div class="date hide">
                        <el-form-item label="执行时间">
                            <el-date-picker
                                    v-model="formData.run_datetime"
                                    type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </div>

                    <el-form-item>
                        <el-button type="info" @click="cancel">取消</el-button>
                        <el-button type="primary" @click="addJob">确定</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <!-- 添加任务表单结束 -->
        </el-main>
    </div>
</el-container>
</body>

<script>
    var app = new Vue({
        el: '#app',
        mixins: [rules],
        data: {
            title: "添加任务",
            formData: {},
            navs: [
                {
                    name: "任务列表",
                    url: "/scheduler-vue"
                },
                {
                    name: "修改任务",
                    url: "/scheduler-modify-vue"
                }
            ],
            triggers: [
                {
                    value: "date",
                    label: "单次任务"
                },
                {
                    value: "cron",
                    label: "周期任务"
                },
                {
                    value: "interval",
                    label: "间隔任务"
                },
                {
                    value: "random",
                    label: "随机任务"
                }
            ],
            random_arr:[10,60],
        },
        watch:{
          random_arr:function (val) {
              this.formData.random = val[0]+'-'+val[1]
          }
        },
        methods: {
            jobDetail: function (job_id) {
                axios.get("/scheduler/jobDetail", {
                    params: {
                        job_id: job_id
                    }
                }).then((response) => {
                    this.title = "修改任务";
                    this.formData = response.data;
                    this.changeTrigger();
                });
            },

            initFormData: function () {
                var job_id = $.cookie("job_id");

                console.log("job_id: " + job_id);

                // 如果有job_id 就是修改，那么先去服务端取最新数据
                if (job_id !== undefined) {
                    this.jobDetail(job_id);
                }
                // 添加数据
                else {
                    this.formData = {
                        server_name: $.cookie("server_name"),
                        server_host: $.cookie("server_host"),
                        project_name: $.cookie("project_name"),
                        spider_name: $.cookie("spider_name"),
                        trigger: "cron",
                        cron: "* * * * *",
                        run_datetime: this.getDatetime(),
                        interval: 3,
                        random: "10-60"
                    };
                }
            },

            getDatetime: function () {
                var d = new Date();
                var year = d.getFullYear();
                var month = change(d.getMonth() + 1);
                var day = change(d.getDate());
                var hour = change(d.getHours());
                var minute = change(d.getMinutes());
                var second = change(d.getSeconds());

                function change(t) {
                    if (t < 10) {
                        return "0" + t;
                    } else {
                        return t;
                    }
                }

                var time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
                return time;
            },

            cancel: function () {
                window.location.href = "/scheduler-vue";
            },

            addJob: function () {
                axios.post("/scheduler/addJob", this.formData
                ).then((response) => {
                    $.cookie("job_id", response.data.job_id)
                    this.jobDetail(response.data.job_id);
                    this.$message({
                        type: response.data.message_type,
                        message: response.data.message
                    });
                    setTimeout(()=>{
                        this.cancel()
                    },2000)
                });
            },
            changeTrigger: function () {
                console.log(this.formData.trigger);
                // 隐藏所有分类
                for (var index in this.triggers) {
                    var trigger = this.triggers[index];
                    $(`.${trigger.value}`).addClass("hide");
                }
                // 显示选中分类
                $(`.${this.formData.trigger}`).removeClass("hide");

            }
        },
        created() {
            this.initFormData();
        }
    });
    window.app = app;
</script>
</html>
